<template>
  <div id="categoryChart"  style="width: 1800px; height: 1100px"/>
</template>
<script>
import * as echarts from 'echarts';
import lineage from '@/api/assets/lineage'
export default {
  data() {
    return {
      cdata: [],
      link:[]
    };
  },
  methods: {
    // 加载banner列表数据
    init(tableName) {
        this.setChartData(),
        lineage.getLineage("gmall."+tableName).then(response => {
          this.cdata=response.data;
          this.link = response.link;
          this.setChartData();
        })
    },
    setChartData() {
      const option = {
        title: {
          text: "血缘关系",
          left: "left",
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label: {
              show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },
            data:this.cdata,
            links:this.link,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      };

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("categoryChart"));
      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>
<style >
.my-label {
  /*background: #E1F3D8;*/
  width: 200px;
}
.el-button--mini, .el-button--mini.is-round{padding:7px 6px}


</style>
